<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
          1. promise是什么?
             - promise是一个容器, 内部封装了一个异步操作
             - 将来会给出一个结果, 这个结果有可能成功也有可能失败

          2. promise解决了什么问题?
             - 在之前的开发中, 一些异步操作都是通过回调函数完成, 多个异步操作就会形成回调函数嵌套回调函数, 最终形成回调地狱, 代码业务变得难以维护
             - promise就是用链式调用方式解决了回调地狱

          3. promise怎么用?
             - promise中有三个状态: pending, fulfilled, rejected
               - 状态是不可逆的: pending -> fulfilled   pending -> rejected  
        
             - 定义
               const p = new Promise((resolve, reject)=>{
                    // 内部封装一个异步操作, 将来会给出一个结果
                    // 通过resolve函数, 对外给出一个成功的结果, 此时, promise的状态由pending -> fulfilled
                    // 通过reject函数, 对外给出一个失败的结果, 此时, promise的状态由pending -> rejected
                })  
                
             - 使用: 外部通过链式调用
                p.then((res)=>{
                    // 接收resolve函数给出的成功结果
                }).catch((err)=>{
                    // 接收reject函数给出的失败的结果
                })  
        */

        // 需求1：开一个延时器 setTimeout，在延迟器结束后(2s)， 做某件事： alert 一个延时器结束了
        // 需求2：要做的事情，不希望写死，第一次 alert 一个zs， 第二次 console 一个ls
        // 需求3：希望是等待做完第一件事情之后，再等待做第二件事

        // ---------------------------------------------------------------------
        // 1. 用回调函数方式实现
        // function fn(callback){
        //     setTimeout(()=>{
        //         callback && callback()
        //     }, 2000)
        // }
        
        // // 第一件事情
        // fn(()=>{
        //     console.log('张三')
        //     // 第二件事情
        //     fn(()=>{
        //         console.log('李四')
        //         // 第三件事情
        //         fn(()=>{
        //             console.log('王五')
        //         })
        //     })
        // })

        // 2. 用promise的方式实现
        // function fn(){
        //     return new Promise((resolve, reject)=>{
        //         // 内部封装一个异步的操作
        //         setTimeout(()=>{
        //             resolve()
        //         }, 2000)
        //     })
        // }

        // fn().then(()=>{
        //     console.log('张三')
        //     return fn()
        // }).then(()=>{
        //     console.log('李四')
        //     return fn()
        // }).then(()=>{
        //     console.log('王五')
        // })

        // ----------async/await----------
        // 本质上还是promise, 在语法上显得更加直观
        // 用同步的思维去执行异步的操作

        // async function exam(){
        //    await fn()
        //    console.log('张三')

        //    await fn()
        //    console.log('李四')

        //    await fn()
        //    console.log('王五')
        // }
        // exam()


        // ---------------------------
        function fn(){
            return new Promise((resolve, reject)=>{
                // 内部封装一个异步的操作
                setTimeout(()=>{
                    resolve('你成功坚持了2秒')
                }, 2000)
            })
        }
       
        async function exam(){
            const res = await fn()
            //console.log(res) // 直接打印拿到的是成功的结果
            // 如果返回给外部, 会默认包装成一个promise
            return res
        }

        // exam()
        // console.log(exam()) // Promise {<pending>}

       exam().then((res)=>{
         console.log(res)
       })     
    </script>
</body>
</html>